<template>
  <a-scrollbar style="overflow: auto">
    <div id="devtool">
      <div>
        <IconClose @click="handleCloseClick" />
      </div>
      <div>
        <div id="htmldiv"></div>
      </div>
    </div>
  </a-scrollbar>
</template>

<script setup>
import { IconClose } from '@arco-iconbox/vue-boxy'
import { phpGenerator } from 'blockly/php'
import { onMounted, ref } from 'vue'

import { useStore } from '../store/store'

var htmlContent = '鸡你太美'
var code = ref(htmlContent)
const store = useStore()

store.devtoolupd = function(text){
  const div = document.getElementById('htmldiv');
  div.innerHTML = text;
}

function handleCloseClick() {
  store.devtoolOpen = false;
}

</script>

<style lang="less">
@font-face {
  font-family: JetBrainsMono;
  font-display: swap;
  src: url('../assets/mono.ttf');
}

#app > section {
  @media screen {
    @media (max-width: 768px) {
      > div {
        min-width: 100vw;
        max-width: 100%;
        padding: 0;

        > div.arco-resizebox-trigger-vertical > div {
          display: none;
        }
      }
    }

    @media (min-width: 768px) {
      > div {
        min-width: 25%;
        max-width: 60%;
      }
    }
  }

  > div > div > div {
    > div.arco-scrollbar-container {
      padding: 1em;
      height: calc(100vh - 2em);
    }

    > div.arco-scrollbar-track > div > div {
      background: --color-fill-4 !important;
    }
  }
}

#devtool {
  > div {
    > svg {
      position: fixed;
      top: 12px;
      right: 12px;

      width: 36px;
      height: 36px;

      color: var(--color-text-3);
    }

    > pre {
      margin: 0;
    }
  }

  @media screen {
    @media (max-width: 768px) {
      > div:nth-child(1) {
        display: block;
        height: 60px;
      }
    }

    @media (min-width: 768px) {
      > div:nth-child(1) {
        display: none;
      }
    }
  }

  > div:nth-child(2) {
    width: 100%;
  }
}
</style>
